import React, { Component } from 'react'
import { NavLink, Redirect, Route, Switch } from 'react-router-dom'
import Header from './components/Header'
import Home from './pages/Home'
import About from './pages/About'
import Test from './pages/Test'
import './App.css'
export default class App extends Component {
  render() {
    return (
      <div>
        <Header title={1111}></Header>
        {/* 按照规则配置路由 link最终会转换为a标签*/}
        <div className="tabBar">
          <NavLink to="/home">Home</NavLink>
          <NavLink to="/about">About</NavLink>
          <NavLink to="/test">Test</NavLink>
        </div>
        {/* 注册对应的路由 */}
        {/* exact 严格匹配 */}
        <Switch>
          <Route path="/home" component={Home}></Route>
          <Route path="/about" component={About}></Route>
          <Route exact path="/test" component={Test}></Route>
          <Redirect to="/home"></Redirect>
        </Switch>
      </div>
    )
  }
}
